<template>
  <view class="phxx-item">
    <view class="phxx-item-content">
      <view class="top">
        <view class="cname-box">
          <view class="cname">{{ itemList.carBrand || ''}}</view>
          <view class="cname-fu">{{ itemList.purchase || ''}} | {{ itemList.proName || ''}}</view>
        </view>
        <view
          :class="{'gray-type': itemList.status == 8,'orange-type': (itemList.status == 0) || (itemList.status == 1),'blue-type': (itemList.status == 2) || (itemList.status == 3) || (itemList.status == 4) || (itemList.status == 5) || (itemList.status == 6),
									 'green-type': itemList.status == 7,'red-type': (itemList.status == 9) || (itemList.status == 10),'status': true}">
          {{ statusName[itemList.status] }}
        </view>
      </view>
      <view class="body-box no-back">
        <view class="bottom">
          <view class="items full">
            <text class="til col66">供应商</text>
            <text class="val col3">{{ itemList.supName || '-'}}</text>
          </view>
        </view>
        <view class="bottom">
          <view class="items full">
            <text class="til col66">承运单位</text>
            <text class="val col3">{{ itemList.cusTransport || '-'}}</text>
          </view>
        </view>
        <view class="bottom">
          <view class="items full">
            <text class="til col66">卸货地</text>
            <text class="val col33">{{ itemList.landingPlace || ''}}</text>
          </view>
        </view>
        <view class="bottom">
          <view class="items full">
            <text class="til col66">卸货点</text>
            <text class="val col33">{{ itemList.landingPointName || ''}}</text>
          </view>
        </view>
      </view>

      <view class="bottom gray-items">
        <view class="items title">
          <text class="tils blue">矿发:</text>
        </view>
        <view class="items num-box font14">
          <view class="til col99 font13">毛重</view>
          <view class="val col00 font16 fontwtb">{{ itemList.mineralGrossWeight || '-'}}</view>
        </view>
        <view class="items num-box font14">
          <view class="til col99 font13">皮重</view>
          <view class="val col00 font16 fontwtb">{{ itemList.mineralTareWeight || '-'}}</view>
        </view>
        <view class="items num-box font14">
          <view class="til col99 font13">净重</view>
          <view class="val col00 font16 fontwtb">{{ itemList.driverWeight || '-'}}</view>
        </view>
      </view>

      <view class="bottom gray-items">
        <view class="items title" style="">
          <text class="tils red">到站</text>
        </view>
        <view class="items num-box font14">
          <view class="til col99 font13">毛重</view>
          <view class="val col00 font16 fontwtb">{{ itemList.grossWeight || '-'}}</view>
        </view>
        <view class="items num-box font14">
          <view class="til col99 font13">皮重</view>
          <view class="val col00 font16 fontwtb">{{ itemList.netWeight || '-'}}</view>
        </view>
        <view class="items num-box font14">
          <view class="til col99 font13">净重</view>
          <view class="val col00 font16 fontwtb">{{ itemList.totalWeight || '-'}}</view>
        </view>
      </view>
      <view class="bottom block-items">
        <view class="items gray-back">
          <view class="til col99 font13">亏吨</view>
          <view class="val col00 font16 fontwtb">{{ itemList.deficientTon || '-'}}</view>
        </view>
        <view class="items gray-back">
          <view class="til col99 font13">涨吨</view>
          <view class="val col00 font16 fontwtb">{{ itemList.riseTon || '-'}}</view>
        </view>
        <view class="items gray-back">
          <view class="til col99 font13">扣费</view>
          <view class="val col00 font16 fontwtb">{{ itemList.deductCost || '-'}}</view>
        </view>
      </view>
      <view class="button-wrapper">
        <view class="bottom-btn">
          <button v-if="
              orderSuspend &&
              (statusName[itemList.status] == '待确认' ||
                statusName[itemList.status] == '待称毛' ||
                statusName[itemList.status] == '待录皮' ||
                statusName[itemList.status] == '待出厂')
            " class="cancelBtn small" size="mini" @click.stop="confirmSuspend(itemList)">
            挂起
          </button>

          <button class="cancelBtn small" size="mini" v-if="(itemList.status <= 5) && hasPermCancel"
            @click.stop="cancelWaybill(itemList)">
            取消
          </button>
          <button class="cancelBtn small" size="mini" v-if="statusName[itemList.status] == '挂起'"
            @click.stop="confirmRecovery(itemList)">
            恢复
          </button>
          <button v-if="itemList.status == 4 && hasPermConfirm" class="cancelBtn small" size="mini"
            @click.stop="confirmReceipt(itemList)">
            确认收货
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    toast, getButtonShow
  } from '@/utils/common';
  export default {
    name: 'row-number',
    props: {
      hasPermConfirm: {
        type: Boolean,
        default: false
      },
      hasPermCancel: {
        type: Boolean,
        default: false
      },
      itemList: {
        type: Object,
        default: {
          vehicleNo: '',
          driverName: '',
          queueStatusName: '',
          customerName: '',
          coalSubtypeName: '',
          loadingSiteName: '',
          queueTime: '',
          callNumberTime: '',
          carBrand: '',
          statusName: '',
          enterName: '',
          cusTransport: '',
          proName: '',
          freight: '',
          landingPlace: '',
          landingPointName: '',
          mineralGrossWeight: '',
          mineralTareWeight: '',
          driverWeight: '',
          grossWeight: '',
          netWeight: '',
          totalWeight: '',
          deficientTon: '',
          riseTon: '',
          deductCost: '',
        }
      },
      orderSuspend: false
    },
    computed: {
      showFlag() {
        let flag = false;
        switch (this.statusName[this.itemList.status]) {
          case '挂起':
            flag = true;
            break;
          case '待确认':
            flag = true;
            break;
          case '待称毛':
            flag = true;
            break;
          case '待录皮':
            flag = true;
            break;
          case '待出厂':
            flag = true;
            break;
          default:
            break;
        }
        return flag;
      }
    },
    data() {
      return {
        statusName: {
          0: '待供应商审核',
          1: '待采购方审核',
          2: '待入场',
          3: '待称毛',
          4: '待确认',
          5: '待录皮',
          6: '待出厂',
          7: '已完成',
          8: '已作废',
          9: '已终止',
          10: '挂起'
        },
        orderListName: {
          0: '扫供货商的二维码',
          1: '扫采购方的二维码',
          2: '销售自动生成采购订单'
        },
      };
    },
    methods: {
      handleClick(item, type) {
        console.log(item);
        this.$emit('manualCalling', item, type);
      },
      confirmReceipt(item) {
        this.$modal.confirm('确认收货后，司机将前往空磅称皮').then(() => {
          this.$emit('showButton', item);
        });
      },
      confirmSuspend(item) {
        this.$emit('guaqiFun', item);
      },
      cancelWaybill(item) {
        this.$emit('cancelFun', item)
      },
      confirmRecovery(item) {
        this.$emit('huifuFun', item);
      },
      clickImg() {
        uni.previewImage({
          urls: [this.itemList.fileUuid]
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .top .status {
    min-width: 58px;
    margin-left: 10px;
  }

  .button-wrapper {
    display: flex;
    justify-content: flex-end;
  }

  .bottom-btn {
    text-align: right;
    border-top: 1px solid #e8e7e7;
    padding-top: 10px;
    margin-left: 10px;
    width: 100%;

    button {
      margin-left: 10rpx;
    }

  }

  button {
    color: #fff !important;
    border: 1px solid #409eff !important;
    background-color: #409eff !important;
  }

  .bottom.gray-items {
    position: relative;
    padding: 0;
    margin: 8px 0;
    border-radius: 8rpx;
    background-color: #f1f2f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24.88rpx;

    .num-box {
      height: 80rpx;
      width: 30%;
      text-align: center;
      padding: 0;
      padding-bottom: 10rpx;

      .val,
      .til {
        height: 40rpx;
        line-height: 43rpx;
        width: 100%;
      }

      .val {
        margin-left: 0;
      }
    }

    .items {
      padding: 0;
    }

    .items:nth-child(2) {
      margin-left: 96rpx;
    }

    .title {
      width: 96rpx;
      position: absolute;

      .tils {
        width: 96rpx;
        height: 80rpx;
        display: inline-block;
        border-radius: 10rpx 0 0 10rpx;
        text-align: center;
        line-height: 80rpx;
      }

      .blue {
        background-color: #D9ECFF;
        color: #409EFE;
        font-weight: bold;
      }

      .red {
        background-color: #FFECEC;
        color: #FF4D4F;
        font-weight: bold;
      }
    }
  }

  .bottom .blue-back {
    background-color: rgba(64, 158, 254, 0.1);
    padding: 0;
    margin: 8px 0;

    .items {
      padding: 0;
    }
  }

  .font14 {
    font-size: 24.88rpx;
  }
</style>